<template>
  <div class="login-contianer">
    <div class="login-box">
      <!-- 标志图片 -->
      <div class="sign-img">
        <img src="../assets/img/sign.png" alt="" />
      </div>
      <!-- 登录表单 -->
      <el-form
        class="login-form"
        label-width="60px"
        label-position="left"
        size="middle"
      >
        <el-form-item label="用户名">
          <el-input v-model="user"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="password" type="password"></el-input>
        </el-form-item>
        <el-form-item class="login-button">
          <el-button type="primary" @click="login">管理员登录</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: "",
      password: "",
    };
  },
  methods: {
    login() {
      let data = {};
      data.user = this.user;
      data.password = this.password;
      data.type = 0;
      this.$http.post("user/login",data).then((response) =>{
        let code = response.data.code;
        if (code == 200) {
          let userObj = response.data.message;
          this.$session.setItem("user",userObj);
          this.$router.replace("home");
        }else{
          this.$message.error(response.data.message);
        }
      });
      
    },
  },
};
</script>

<style scope>
.login-contianer {
  background-color: #fcf6f6;
  height: 100%;
  overflow: hidden;
}
.login-box {
  position: relative;
  height: 350px;
  width: 500px;
  /* background-color: #c5464a; */
  margin: 100px auto;
  border-radius: 10px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}
.sign-img {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sign-img img {
  height: 100px;
}
.login-form {
  position: absolute;
  bottom: 10%;
  width: 75%;
  left: 50%;
  transform: translate(-50%, 0);
}
.login-form .el-form-item {
  margin-top: 10px;
  padding: 6px 0px;
}
.login-form label {
  font-size: 16px;
  font-weight: 900;
  color: #1b0a0a;
}
.login-button {
  margin-left: 20px;
}
.login-button button {
  margin: 0px 16px;
}
</style>